<template>
  <uv-modal 
    v-model="visible" 
    title="完善账号信息"
    :show-cancel-button="true"
    cancel-text="稍后处理"
    confirm-text="立即完善"
    @confirm="handleComplete"
    @cancel="handleCancel"
  >
    <view class="platform-auth-content">      <view class="auth-icon">
        <!-- #ifdef MP-WEIXIN -->
        <view class="icon wechat-icon">微</view>
        <!-- #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <view class="icon alipay-icon">支</view>
        <!-- #endif -->
      </view>
      
      <view class="auth-text">
        <view class="main-text">{{ mainText }}</view>
        <view class="sub-text">{{ subText }}</view>
      </view>
      
      <view class="auth-benefits">
        <view class="benefit-item">
          <text class="benefit-icon">✓</text>
          <text>享受更便捷的支付体验</text>
        </view>
        <view class="benefit-item">
          <text class="benefit-icon">✓</text>
          <text>获取专属优惠和积分奖励</text>
        </view>
        <view class="benefit-item">
          <text class="benefit-icon">✓</text>
          <text>订单状态实时同步</text>
        </view>
      </view>
    </view>
  </uv-modal>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ensurePlatformId } from '@/utils/platformId'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'payment' // 'payment' | 'profile'
  }
})

const emit = defineEmits(['update:modelValue', 'completed', 'cancelled'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const mainText = computed(() => {
  // #ifdef MP-WEIXIN
  return '绑定微信账号'
  // #endif
  // #ifdef MP-ALIPAY
  return '绑定支付宝账号' 
  // #endif
  return '完善账号信息'
})

const subText = computed(() => {
  if (props.type === 'payment') {
    return '为了完成支付，需要获取平台授权信息'
  }
  return '绑定后可享受更多便民服务'
})

const handleComplete = async () => {
  try {
    uni.showLoading({ title: '授权中...' })
    
    const success = await ensurePlatformId('manual')
    
    uni.hideLoading()
    
    if (success) {
      visible.value = false
      emit('completed')
      uni.showToast({
        title: '绑定成功',
        icon: 'success'
      })
    }
  } catch (error) {
    uni.hideLoading()
    console.error('平台授权失败:', error)
    uni.showToast({
      title: '授权失败，请重试',
      icon: 'none'
    })
  }
}

const handleCancel = () => {
  visible.value = false
  emit('cancelled')
}
</script>

<style lang="scss" scoped>
.platform-auth-content {
  padding: 20rpx;
  text-align: center;
    .auth-icon {
    margin-bottom: 30rpx;
    
    .icon {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48rpx;
      font-weight: bold;
      color: white;
      margin: 0 auto;
    }
    
    .wechat-icon {
      background-color: #07c160;
    }
    
    .alipay-icon {
      background-color: #1678ff;
    }
  }
  
  .auth-text {
    margin-bottom: 40rpx;
    
    .main-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .sub-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
    }
  }
  
  .auth-benefits {
    text-align: left;
    
    .benefit-item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      font-size: 26rpx;
      color: #666;
      
      .benefit-icon {
        color: #07c160;
        font-weight: bold;
        margin-right: 16rpx;
        width: 24rpx;
      }
    }
  }
}
</style>
